<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Basic Globalize Compiler example (development mode)</title>
</head>
<body>
    <h1>Basic Globalize Compiler example (development mode)</h1>

    <div id="requirements">
        <h2>Requirements</h2>
        <ul>
            <li>Read README.md for instructions.</li>
        </ul>
    </div>

    <div id="demo" style="display: none">
        <h2>Demo output</h2>
        <p>Now: <span id="date"></span></p>
        <p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
        <p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
        <p>A number: <span id="number"></span></p>
        <p>A number (compact form): <span id="number-compact"></span></p>
        <p>A currency: <span id="currency"></span></p>
        <p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
        <p>Messages:</p>
        <ul>
            <li><span id="message-0"></span></li>
            <li><span id="message-1"></span></li>
            <li><span id="message-2"></span></li>
            <li><span id="message-3"></span></li>
        </ul>
        <p>Something happened: <span id="relative-time"></span></p>
        <p>Speed limit: <span id="unit"></span></p>
    </div>

    <!--
    First, we load Globalize's dependencies (`cldrjs` and its supplemental
    module).
    -->
    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr.js"></script>
    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/event.js"></script>
    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/supplemental.js"></script>
    <!--
    npm@3 installs flat by default differently from npm@1 and npm@2, so either
    the below or the above will work. Don't do this at your application, pick
    one.
    -->
    <script src="node_modules/cldrjs/dist/cldr.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/event.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>

    <!--
    Next, we load Globalize and its modules. Note they are already available on
    this repository. If it's not, read Usage on Getting Started on the root's
    README.md.
    -->
    <script src="node_modules/globalize/dist/globalize.js"></script>
    <script src="node_modules/globalize/dist/globalize/message.js"></script>
    <script src="node_modules/globalize/dist/globalize/number.js"></script>
    <script src="node_modules/globalize/dist/globalize/plural.js"></script>

    <!-- Load after globalize/number.js -->
    <script src="node_modules/globalize/dist/globalize/date.js"></script>
    <script src="node_modules/globalize/dist/globalize/currency.js"></script>

    <!-- Load after globalize/number.js and globalize/plural.js-->
    <script src="node_modules/globalize/dist/globalize/relative-time.js"></script>
    <script src="node_modules/globalize/dist/globalize/unit.js"></script>

    <!-- Load jQuery to fetch the CLDR and message JSONs -->
    <script src="node_modules/jquery/dist/jquery.js"></script>

    <script>

    // At this point, we have Globalize loaded. But, before we can use it, we
    // need to feed it on the appropriate I18n content (Unicode CLDR). In order
    // to do so, we use `Globalize.load()` and pass the content. On this demo,
    // we made the things a little easier for you: we've embedded static JSON
    // into the demo. So, you don't need to actually fetch it elsewhere.
    $.when(
      $.getJSON( "node_modules/cldr-data/main/en/ca-gregorian.json" ),
      $.getJSON( "node_modules/cldr-data/main/en/currencies.json" ),
      $.getJSON( "node_modules/cldr-data/main/en/dateFields.json" ),
      $.getJSON( "node_modules/cldr-data/main/en/numbers.json" ),
      $.getJSON( "node_modules/cldr-data/main/en/timeZoneNames.json" ),
      $.getJSON( "node_modules/cldr-data/main/en/units.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/currencyData.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/likelySubtags.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/metaZones.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/plurals.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/timeData.json" ),
      $.getJSON( "node_modules/cldr-data/supplemental/weekData.json" ),
      $.getJSON( "messages.json" ),
      $.getJSON( "node_modules/iana-tz-data/iana-tz-data.json" )
    ).then(function( enCaGregorian, enCurrencies, enDateFields, enNumbers, enTimeZoneNames, enUnits,
      currencyData, likelySubtags, metaZones, plurals, timeData, weekData, messages, ianaTzData ) {

      Globalize.load( enCaGregorian[ 0 ] );
      Globalize.load( enCurrencies[ 0 ] );
      Globalize.load( enDateFields[ 0 ] );
      Globalize.load( enNumbers[ 0 ] );
      Globalize.load( enTimeZoneNames[ 0 ] );
      Globalize.load( enUnits[ 0 ] );
      Globalize.load( currencyData[ 0 ] );
      Globalize.load( likelySubtags[ 0 ] );
      Globalize.load( metaZones[ 0 ] );
      Globalize.load( plurals[ 0 ] );
      Globalize.load( timeData[ 0 ] );
      Globalize.load( weekData[ 0 ] );
      Globalize.loadMessages( messages[ 0 ] );
      Globalize.loadTimeZone( ianaTzData[ 0 ] );
      Globalize.locale("en");

      // Load and execute our App.
      $.getScript( "app.js" );
    })
    </script>

</body>
</html>
